
import { useState } from 'react';
import { Table, Button, Popconfirm, Row, Col, Input, Card, message, Modal, Form, Select } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { debug } from 'three/src/Three.TSL.js';

const { Search } = Input;
const { Option } = Select;

// 模拟用户数据
const initialUserData = [
  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '启用' },
  { id: 2, name: '李四', email: 'lisi@example.com', role: '操作员', status: '启用' },
  { id: 3, name: '王五', email: 'wangwu@example.com', role: '浏览者', status: '禁用' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '操作员', status: '启用' },
  { id: 5, name: '钱七', email: 'qianqi@example.com', role: '浏览者', status: '启用' },
  { id: 6, name: '孙八', email: 'sunba@example.com', role: '管理员', status: '启用' },
  { id: 7, name: '周九', email: 'zhoujiu@example.com', role: '操作员', status: '禁用' },
  { id: 8, name: '吴十', email: 'wushi@example.com', role: '浏览者', status: '启用' },
  { id: 9, name: '郑一', email: 'zhengyi@example.com', role: '操作员', status: '启用' },
  { id: 10, name: '王二', email: 'wanger@example.com', role: '管理员', status: '禁用' },
  { id: 11, name: '冯三', email: 'fengsan@example.com', role: '浏览者', status: '启用' },
  { id: 12, name: '陈四', email: 'chensi@example.com', role: '操作员', status: '启用' },
  { id: 13, name: '褚五', email: 'chuwu@example.com', role: '管理员', status: '启用' },
  { id: 14, name: '卫六', email: 'weiliu@example.com', role: '浏览者', status: '禁用' },
  { id: 15, name: '蒋七', email: 'jiangqi@example.com', role: '操作员', status: '启用' },
];

const Users = () => {
  // 存储获取的值
  const [searchValue, setSearchValue] = useState('');
  // 将用户数据改为状态变量，以便可以修改
  const [users, setUsers] = useState(initialUserData);
  // 编辑相关状态
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [editForm] = Form.useForm();
  // 添加用户相关状态
  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
  const [addForm] = Form.useForm();

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <Button
            type="link"
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleEdit(record)}
          />
          <Popconfirm
            title="确定要删除这个用户吗?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button type="link" icon={<DeleteOutlined />} size="small" style={{ color: 'white', border: 'none', }} />
          </Popconfirm>
        </>
      ),
    },
  ];

  // 处理搜索
  const handleSearch = (value) => {
    setSearchValue(value);
    console.log('搜索值:', value);
  };

  // 处理删除用户
  const handleDelete = (userId) => {
    // 过滤掉要删除的用户ID
    const updatedUsers = users.filter(user => user.id !== userId);
    // 更新用户列表状态
    setUsers(updatedUsers);
    // 显示删除成功的提示
    message.success('用户已成功删除');
  };

  // 处理编辑用户
  const handleEdit = (user) => {
    // 设置当前编辑的用户
    setCurrentUser(user);
    // 填充表单数据
    editForm.setFieldsValue({
      name: user.name,
      email: user.email,
      role: user.role,
      status: user.status
    });
    // 显示编辑模态框
    setIsEditModalVisible(true);
  };

  // 处理保存编辑
  const handleSaveEdit = () => {
    editForm.validateFields().then(values => {
      // 更新用户数据
      const updatedUsers = users.map(user =>
        user.id === currentUser.id ? { ...user, ...values } : user
      );
      // 更新状态
      setUsers(updatedUsers);
      // 关闭模态框
      setIsEditModalVisible(false);
      // 显示成功提示
      message.success('用户信息已更新');
    }).catch(info => {
      message.error('表单验证失败');
    });
  };

  // 处理添加用户
  const handleAdd = () => {
    // 重置表单
    addForm.resetFields();
    // 显示添加用户模态框
    setIsAddModalVisible(true);
  };

  // 处理保存新用户
  const handleSaveAdd = () => {
    debugger;
    addForm.validateFields().then(values => {
      // 生成新用户ID（简单方式：现有用户ID最大值+1）
      const maxId = users.length > 0 ? Math.max(...users.map(user => user.id)) : 0;
      const newUser = {
        id: maxId + 1,
        ...values
      };
      // 添加新用户到列表
      setUsers([...users, newUser]);
      // 关闭模态框
      setIsAddModalVisible(false);
      // 显示成功提示
      message.success('用户已成功添加');
    }).catch(info => {
      message.error('表单验证失败');
    });
  };

  return (
    <div>
      <Card title="用户管理" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加用户</Button>}>
        <Row gutter={16} className="mb-4">
          <Col span={8}>
            <Search
              placeholder="搜索用户名"
              allowClear
              onSearch={handleSearch}
              onChange={(e) => setSearchValue(e.target.value)}
              enterButton={<SearchOutlined />}
              size="large"
            />
          </Col>
        </Row>
        {/* 使用状态中的用户数据 */}
        <Table columns={columns} dataSource={users} rowKey="id" />
      </Card>

      {/* 编辑用户模态框 */}
      <Modal
        title="编辑用户"
        open={isEditModalVisible}
        onCancel={() => setIsEditModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setIsEditModalVisible(false)}>
            取消
          </Button>,
          <Button key="save" type="primary" onClick={handleSaveEdit}>
            保存
          </Button>
        ]}
      >
        <Form
          form={editForm}
          layout="vertical"
          initialValues={{
            status: '启用'
          }}
        >
          <Form.Item
            name="name"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { whitespace: true, message: '用户名不能为空' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色">
              <Option value="管理员">管理员</Option>
              <Option value="操作员">操作员</Option>
              <Option value="浏览者">浏览者</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select placeholder="请选择状态">
              <Option value="启用">启用</Option>
              <Option value="禁用">禁用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      {/* 添加用户模态框 */}
      <Modal
        title="添加用户"
        open={isAddModalVisible}
        onCancel={() => setIsAddModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setIsAddModalVisible(false)}>
            取消
          </Button>,
          <Button key="save" type="primary" onClick={handleSaveAdd}>
            保存
          </Button>
        ]}
      >
        <Form
          form={addForm}
          layout="vertical"
          initialValues={{
            status: '启用',
            role: '浏览者'
          }}
        >
          <Form.Item
            name="name"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { whitespace: true, message: '用户名不能为空' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' },
              {
                validator: (_, value) => {
                  // 检查邮箱是否已存在
                  const isEmailExists = users.some(user => user.email === value);
                  if (isEmailExists) {
                    return Promise.reject(new Error('该邮箱已被使用'));
                  }
                  return Promise.resolve();
                }
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色">
              <Option value="管理员">管理员</Option>
              <Option value="操作员">操作员</Option>
              <Option value="浏览者">浏览者</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select placeholder="请选择状态">
              <Option value="启用">启用</Option>
              <Option value="禁用">禁用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Users;
